Description

Adds a <umb-imaging-thumbnail> element to fetch and show thumbnails. This replaced manual logic in the Media picker, media picker modal, input-media, and media collection.

The thumbnail component also holds an IntersectionObserver to ensure the images are not fetched (neither the thumbnail URL nor the image resource) before they are visible.

Types of changes

• New feature (non-breaking change which adds functionality)

Motivation and context

We want to achieve the following:

1. Thumbnails are loaded in parallel
2. Thumbnails are loaded in the same way across the application (shared logic)
3. Thumbnails are only loaded when needed (intersected)
4. The fallback logic is the same across
5. Ensure good a11y for thumbnail figures
6. Ensure images are loaded in the expected size and no bigger than what is needed

How to test?

1. Upload more than a couple of rows of media to a folder in the Media Library
2. Open DevTools and make sure only one row is visible
3. Reload the page and check that only that row is being requested
4. Scroll the page and check the next row is being loaded, etc.
5. Test that thumbnails show up outside regular sections, e.g. in User or Packages

Considerations

• Considered to change the object-fit from cover to contain to show the whole image. However, this has not been altered in this PR.